<template>
	<view class="index-container relative" :style="{ background: `url(${imgurl}) no-repeat center center / cover`}">
		<view class="absolute rephoto" @click="handleReLoad" v-if="restPhotoFlag" Data-btnname="重拍">重拍</view>
		<view class="analysising display-flex-center" v-if="restPhotoFlag"> <i class="iconfont icon-loading" v-if="loadingFlag"></i> <view>{{text}}</view> </view>
		<my-mask :flag="trainFlag" :styleObj="style">
			<view class="photo-title">拍摄教程</view>
			<view class="display-flex person-item" v-for="(item, i) in trains" :key="i">
				<img :src="item.img" class="person" alt="" />
				<view class="display-flex-column">
					<view v-for="(info, i) in item.info" :key="i" class="info">{{ info }}</view>
				</view>
			</view>
			<my-button text="我知道了" @click="trainFlag = false" />
		</my-mask>
		<my-mask :flag="errorFlag" height="280">
			<view class="text">
				{{ errorText }}
			</view>
			<my-button text="重新拍摄" @click="handleReLoad()" Data-btnname="分析失败重新拍摄"></my-button>
		</my-mask>
		<view class="circyle-con absolute" v-if="footerFlag">
			<image src="../../static/circle.png" class="absolute circle"></image>
			<!-- <image
				src="../../static/circle-sub.png"
				class="absolute circle-sub"
			></image>
      <image
				src="../../static/circle-sub-sub.png"
				class="absolute circle-sub-sub"
			></image> -->
		</view>
		<view class="absolute text-info" v-if="footerFlag">{{ textInfo }}</view>
		<view class="footer display-flex-around" v-if="footerFlag">
			<view class="display-flex-column img-item" @click="handleImg(0)" Data-btnname="拍摄教程">
				<image src="../../static/train-book.png" class="photo-img-item"></image>
				<view class="name" style="color: #ff6966;font-size: 12px;">教程</view>
			</view>
			<view class="display-flex-column img-item" @click="handleImg(1)" Data-btnname="拍照">
				<image src="../../static/photo.png" class="photo-img-item"></image>
			</view>
			<view class="display-flex-column img-item">
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			faceStatus:"",
			userId:"",
			loadingFlag: true,
			text:'正在分析中...',
			restPhotoFlag: false,
			imgurl: "",
			footerFlag: true,
			style: {
				"align-items": "flex-start",
			},
			trains: [
				{
					img: require("../../static/train1.png"),
					info: ["摘眼镜，露额头", "正面平视摄像头"],
				},
				{
					img: require("../../static/train2.png"),
					info: ["跟随提示移动手机", "寻找最佳拍照位置"],
				},
				{
					img: require("../../static/train1.png"),
					info: ["条件合适时", "相机自动拍照"],
				},
			],
			errorText:
				"未拍摄到清晰的正脸，请在光照充足的状态下，面对镜头拍摄照片",
			trainFlag: false,
			errorFlag: false,
			textInfo: "为了准确的检测肌肤状态，拍照前请卸妆、洁面后进行检测"
		};
	},
	onLoad(option){
		
		this.faceStatus = (option.faceStatus ? option.faceStatus : 1);
		this.userId = option.userId;
		
		if(this.$common.getStorage("ShowCourse")==undefined){
			this.$common.setStorage("ShowCourse",1);
			this.handleImg(0);
		}
		// this.handleReLoad()
	},
	onShow(){
		let _this = this;
			_this.handleSugoioLoad('拍照', 'photoAnalysis')
		this.handleReLoad()
	},
	methods: {
		handleReLoad(){
			this.errorFlag = false;
			this.imgurl = "";//require("../../static/bg-case.png");
			this.footerFlag = true;
			this.restPhotoFlag = false
		},
		async handleUpload() {
			try {
				document.title = '拍照中'
				this.text = '正在分析中...'
				let result = await this.$utils.upload();
				if(result.code == 0){
					this.imgurl = result.url;
					uni.getImageInfo({src: this.imgurl}).then(res => {
						console.log('res :>> ', res);
					})
					this.footerFlag = this.imgurl.startsWith("../");
					this.restPhotoFlag = !this.imgurl.startsWith("../");
					const res = await this.$utils.getApi("aiTest?url=" + this.imgurl + "&userId=" + this.userId + "&faceStatus=" + this.faceStatus);
					
					setTimeout(()=>{
						if(res.code == 500){
							this.errorFlag = true
							this.text = '分析失败'
							this.loadingFlag = false
							this.errorText = res.msg
							this.loadingFlag = false
						}else {
							this.loadingFlag = true
							uni.setStorageSync("item", JSON.stringify({...res.data,avatar: this.imgurl}));
							setTimeout(() => {
								this.$common.to('../skinTestReport/index');
								// uni.navigateTo({
								// 	url: '../../pages/skinTestReport/index'
								// })
							}, 2000);
						}
					},1000);
				}
				
			} catch (error) {
				console.log(`error`, error);
			}
		},
		handleImg(index) {
			if (index == 0) {
				this.trainFlag = true;
			} else if (index == 1) {
				this.handleUpload();
			}
		},
	},
};
</script>

<style lang="scss" scoped>
@mixin info {
	font-size: 12px;
	color: #333333;
	line-height: 17px;
}
.index-container {
	width: 100%;
	height: 100vh;
	.photo-title {
		width: 100%;
		text-align: center;
		margin-top: -20px;
	}
	.text {
		@include info;
	}
	.person-item {
		.person {
			margin-right: 20rpx;
			width: 116px;
			height: 66px;
		}
		.info {
			@include info;
		}
	}
	.rephoto {
		color: #fff;
		font-size: 28rpx;
		right: 28rpx;
		left: unset;
		top: 52rpx;
	}
	.analysising {
		width: 350rpx;
		height: 70rpx;
		color: #fff;
		font-size: 14px;
		border-radius: 15px;
		position: absolute;
		margin-left: calc(50% - 85px);
		background-color: rgba($color: #ff6590, $alpha: 0.4);
		bottom: 248rpx;
		.icon-loading{
			animation: move infinite linear 2s;
			margin-right: 5px;
			@keyframes move {
				0%{}
				100%{
					transform: rotate(360deg);
				}
			}
		}
	}
	.circyle-con {
		top: 10%;
		right: 0;
		.circle {
			top: 10%;
			right: 0;
			width: 716rpx;
			height: 716rpx;
			// animation: circle 7s infinite;
		}
		@keyframes circle {
			0% {
				transform: rotate(0);
			}
			// 20% {
			// 	transform: rotate(-160deg) scale(1.2);
			// }
			30% {
				transform: rotate(-200deg) scale(0.6);
			}
			// 40% {
			// 	transform: rotate(60deg) scale(1.2);
			// }
			// 50% {
			// 	transform: rotate(120deg) scale(0.4);
			// }
			// 60% {
			// 	transform: rotate(200deg) scale(0.6);
			// }
			// 70% {
			// 	transform: rotate(-200deg) scale(0.3);
			// }
			// 80% {
			// 	transform: rotate(200deg) scale(0.6);
			// }
			50% {
				transform: rotate(360deg) scale(0.8);
			}
			80% {
				transform: rotate(360deg) scale(0.6);
			}
			100% {
				transform: rotate(0deg) scale(1);
			}
		}
		.circle-sub-sub {
			top: 10%;
			animation: circle 3s infinite;
			right: 0;
			width: 610rpx;
			height: 610rpx;
		}
		.circle-sub {
			top: 10%;
			animation: circle 3s infinite;
			right: 0;
			width: 620rpx;
			height: 620rpx;
		}
	}
	.text-info {
		top: 65%;
		right: 0;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
	}
	.footer {
		height: 200rpx;
		background: #ffffff;
		bottom: 0;
		position: fixed;
		width: 100%;
		.img-item {
			.photo-img-item {
				width: 50rpx;
				height: 50rpx;
			}
			&:nth-of-type(2) .photo-img-item {
				width: 140rpx;
				height: 140rpx;
			}
		}
	}
}
</style>